Passed
Push — dev ( f9a638...08dce6 )
by Kasper
01:03 queued 13s
created

DeleteModal.tsx ➔ DeleteModal   B

Complexity

Conditions 3

Size

Total Lines 52
Code Lines 44

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
eloc 44
dl 0
loc 52
rs 8.824
c 0
b 0
f 0
cc 3

How to fix   Long Method   

Long Method

Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.

For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.

Commonly applied refactorings include:

1
import React from 'react';
2
import { useState, useEffect } from 'react';
3
import { StyleSheet, Text, View, Pressable, Modal, TextInput} from 'react-native';
4
import userModel from '../../models/user';
5
import { showMessage, hideMessage } from "react-native-flash-message";
6
7
export default function DeleteModal({navigation, modalVisible, setModalVisible, setIsLoggedIn}) {
8
9
    async function deleteAccount(navigation) {
10
        const result = await userModel.deleteAccount();
11
12
        if (Object.prototype.hasOwnProperty.call(result, 'errors')) {
13
            showMessage({
14
                message: result['errors']['title'],
15
                type: 'danger'
16
            })
17
18
            return;
19
        };
20
21
        showMessage({
22
            message: result['message'],
23
            type: 'danger'
24
        });
25
26
        setIsLoggedIn(false);
27
        navigation.navigate('Auth');
28
    }
29
30
    return (
31
        <Modal
32
        animationType='fade'
33
        transparent={true}
34
        visible={modalVisible}
35
        onRequestClose={() => {
36
            setModalVisible(!modalVisible);
37
        }}
38
        >
39
            <View style={styles.modalContainer}>
40
41
                <View style={[styles.messageContainer, styles.shadowProp]}>
42
                    <Text style={styles.title}>Are you sure you want to delete your account?</Text>
43
44
                    <Pressable style={[styles.prepaidButton]} onPress={() => {
45
                        deleteAccount(navigation)
46
                    }}>
47
                        <Text style={{color: 'white'}}>Yes, delete account</Text>
48
                    </Pressable>
49
50
                    <Pressable style={[styles.prepaidButton, {backgroundColor: 'grey'}]} onPress={() => {
51
                        setModalVisible(!modalVisible);
52
                    }}>
53
                        <Text style={{color: 'white'}}>No</Text>
54
                    </Pressable>
55
                </View>
56
            </View>
57
        </Modal>
58
    )
59
}
60
61
const styles = StyleSheet.create({
62
    modalContainer: {
63
        height: '100%', 
64
        width: '100%', 
65
        backgroundColor: 'rgba(0, 0, 0, 0.8)', 
66
        position:'absolute',
67
        // justifyContent: 'center',
68
        alignItems: 'center'
69
    },
70
71
    messageContainer: {
72
        backgroundColor: 'tomato',
73
        width: '90%',
74
        height: 250,
75
        marginTop: 200,
76
        justifyContent: 'center',
77
        alignItems: 'center'
78
    },
79
80
    shadowProp: {
81
        elevation: 5,
82
        shadowColor: 'black'
83
    },
84
85
    title: {
86
        fontSize: 18,
87
        fontWeight: '600',
88
        color: 'white'
89
    },
90
91
    prepaidButton: {
92
        backgroundColor: 'black',
93
        width: '90%',
94
        height: 50,
95
        borderRadius: 50,
96
        display: 'flex',
97
        justifyContent: 'center',
98
        alignItems: 'center',
99
        marginTop: 30,
100
    },
101
})